<template>
	<div class="addMenu">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/menu' }">菜单库</el-breadcrumb-item>
			<el-breadcrumb-item>{{this.$route.name}}</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="main">
			<div class="contain">
				<header>
					<div class="main-title">{{menu.name}}</div>
					<hr class="main-hr">
					<div class="main-subtitle">{{menu.txt}} Menu</div>
				</header>
				<el-form ref="form" :model="form" class="menuform" :rules="rules" label-width="110px">
					<el-form-item label="菜单名称：" prop="name">
						<el-input v-model="form.name" ></el-input>
					</el-form-item>
					<el-form-item label="显示名：">
						<el-input v-model="form.displayname"></el-input>
					</el-form-item>
					<el-form-item label="选择图片：">
						<el-button type="info" class="bluecolor" @click="chousepics">从素材库选择</el-button>
						<el-button size="small" type="primary" @click="picUpload(preSrc)">点击上传</el-button>
						<div class="picture">
							<img class="item-pic" :src="image" alt="">					
							<div class="shade" v-show=" shade != ''">{{shade}}</div>
						</div>
					</el-form-item>
<!-- 					<el-form-item label="协议方式：">
						<el-input v-model="form.method"></el-input>
					</el-form-item> -->
<!-- 					<el-form-item label="协议方式：" prop="method">
            <el-select @change="onSelectChange(form.method)" v-model="form.method" placeholder="请选择协议方式">
              <el-option :key="index" v-for="(item,index) of method" :label="item.name" :value="item.name"></el-option>
            </el-select>
					</el-form-item> -->

					
					<el-form-item label="目标：" prop="target">
						<el-select 
						v-model="form.target" 
						filterable placeholder=""
						@change="onSelectChange(form.target)"
						>
							<el-option v-for="item in targets" :value="item.name" :label="item.name">{{item.name}}</el-option>
						</el-select>

					</el-form-item>
					<el-form-item label="选择链接：" v-show="isShowSelectLink">
						<el-input v-model="uri"></el-input>
						<el-button type="info" class="bluecolor" @click="chouseLinks">从素材库选择</el-button>
					</el-form-item>
					<el-form-item label="父菜单名：">
						<el-select v-model="form.parentPrivilegeFunction.id" filterable placeholder="">
							<el-option v-for="item in parentMenu" :value="item.id" :label="item.name">{{item.name}}</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="排序：" >
						<el-input v-model="form.sort"></el-input>
					</el-form-item>

					<el-form-item label="备注说明：">
						<el-input type="textarea" v-model="form.remark"></el-input>
					</el-form-item>
					<el-form-item style="text-align:center">
						<el-button type="primary" @click="onSubmit('form')" :disabled="disable">保存</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<pic-dialog :showAdd="showAdd" :dialogObj="dialogObj" @hidden-show="hiddenShow" ref="picDialog"></pic-dialog>
		<link-dialog :showLink="showLink" :dialogLink="dialogLink" @hidden-link="hiddenLink" ref="linkDialog"></link-dialog>
		<link-list :showLinkList="showLinkList" :dialoglistList="dialoglistList" @hidden-linklist="hiddenLinklist" ref="linkList"></link-list>
		<pic-list :showPicList="showPicList" :dialogpicList="dialogpicList" @hidden-piclist="hiddenPiclist" ref="picList"></pic-list>
	</div>
</template>

<script>
	import picDialog from "@/components/picDialog";
	import linkDialog from "@/components/linkDialog";
	import linkList from "@/components/linkList";
	import picList from "@/components/picList";
	import { addMenu, getOnemenu, updateMenu, getAllmenu } from "@/api/menu";
	import { addPic, editPic } from '@/api/picPool';
	export default {
		components: {
			picDialog,
			linkDialog,
			linkList,
			picList
		},
		data() {
			return {
				targets: [{
					"name": "resource"
				}, {
					"name": "exe"
				}, {
					"name": "img"
				}, {
					"name": "html"
				}, {
					"name": "menu"
				}, {
					"name": "dataobject"
				}],
				method:[{
					name:"exe"
				},
				{
					name:"web"
				},
				{
					name:"view"
				}],
				issubmenu: false,
				preSrc: "./static/img/upicon.png",
				shade: '',
				formData: {},
				objList: {},
				parentMenu: [],
				menu: {
					name: '新增',
					txt: "New"
				},
				menuid: "",
				image: "./static/img/upicon.png",
				uri: "",
				form: {
					asort: 0,
					displayname: "",
					method:"",
					image: {
						
					},
					name: "",
					parentPrivilegeFunction: {
						"id": ''
					},
					remark: "",
					sort: 0,
					target: "",
					uri: null,
					menuif: "是",
					desc: ""
				},
				resultData: {
					displayname: "",
					image: null,
					name: "",
					sort: 0,
					target: "",
					uri: null,
				},
				rules:{
					name:[{required: true, message: '请输入菜单名称', trigger: 'blur'}],
					target:[{required: true, message: '请选择目标名称', trigger: 'blur'}]
				},
				showAdd: false,
				showLink: false,
				showLinkList: false,
				showPicList: false,
				disable:false,
				dialogObj: {
					title: "新增图片1",
					inpName: "图片名称:",
					btnName: "确认上传",
					src: "./static/img/upicon.png",
					shade: "",
					placeholder: ""
				},
				dialogLink: {
					title: "编辑链接",
					linkName: "链接名称:",
					linkAddress: "链接地址:",
					btnName: "确认上传",
					placeLinkName: "",
					placeLinkAddress: ""
				},
				dialoglistList: {
					title: "编辑链接",
					linkName: "链接名称:",
					linkAddress: "链接地址:",
					btnName: "确认上传",
					placeLinkName: "",
					placeLinkAddress: ""
				},
				dialogpicList: {

				},
				isShowSelectLink:false
			};
		},
		created() {

		},
		mounted() {
			this.getallmenu();
			this.menu = this.$route.params.menu;
			if(this.$route.params.list) {
				this.form = this.$route.params.list
			};
			if(this.$route.params.menuid) {
				this.menuid = this.$route.params.menuid;
				//获取该菜单的详细信息
				getOnemenu(this.menuid).then(res => {
					console.log("menu的信息");
					console.log(res);
					res = res.data;
					this.form.displayname = res.displayname;
					this.form.asort = res.asort;
					if(res.image!=null){
						this.form.image.id = res.image.id;
						this.form.image.storeId = res.image.storeId;
						this.image = 'http://172.17.99.10:10014//api/jp-TIFS-FileCenter-ms/file?businessId=' + res.image.storeId;
					}		
					this.form.name = res.name;
					this.form.parentPrivilegeFunction.id = res.parentPrivilegeFunction.id;
					this.form.sort = res.sort;
					this.form.target = res.target;
					if(res.uri != null) {
						this.form.uri = {};
						this.form.uri.id = res.uri.id;
						this.uri = res.uri.name;
					}
					this.form.remark = res.remark;
				})

			}

		},
		methods: {
			onSelectChange(val){
				console.log(val)
				this.form.target=val
				if(val==="html"){
					this.isShowSelectLink=true
				}else{
					this.isShowSelectLink=false
				}
				console.log(this.isShowSelectLink)
			},
			editLink() {
				this.showLink = true;
				this.dialogLink = {
					title: "编辑链接",
					linkName: "链接名称:",
					linkAddress: "链接地址:",
					agreement: "协议方式:",
					linkClassify: "链接分类:",
					btnName: "确认",
					placeLinkName: "aaaaa",
					placeLinkAddress: "xxxxx",
					valueAgreement: "选项2",
					valueLinkClassify: "选项3"
				};
			},
			picUpload(val) {
				this.showAdd = true;
				this.dialogObj = {
					title: "新增图片1",
					inpName: "图片名称:",
					btnName: "确认",
					src: "./static/img/upicon.png",
					shade: "",
					placeholder: ""
				};
			},
			hiddenShow(formData, pisSrc, objList) {
				this.showAdd = false;
				this.hiddenShow = false;
				this.formData = new FormData();
				this.formData.append("file", formData);;
				this.objList = objList;
				this.image = pisSrc;
			},
			hiddenLink() {
				this.showLink = false;
			},
			hiddenLinklist(data) {
				console.log("链接");
				console.log(data,"data链接");
				console.log(data.val[0],"data链接data.val[0]");
				var res=data.val[0]
				this.showLinkList = data.isShow;
				this.form.uri = {};
				this.form.uri.id = data.val[0].id;
				this.uri = data.val[0].url;
			},
			hiddenPiclist(val, imgsrc, imgid, imgname) {

				this.showPicList = val;
				this.image = imgsrc;
				this.form.image = {};
				this.formData = {};
				this.form.image.storeId =imgid;
				this.form.image.name =imgname;
				this.resultData.image=this.form.image
				console.log(this.resultData,"resultData")
			},

			chouseLinks() {
				this.showLinkList = true;
			},
			chousepics() {

				this.showPicList = true;
			},
			onSubmit(formName) {
				let nowDate=new Date()
				let nowYear=nowDate.getFullYear()
				let nowMonth=nowDate.getMonth()+1
				let nowDay=nowDate.getDate()
				let nowHours=nowDate.getHours()
				let nowMinutes=nowDate.getMinutes()
				let nowSeconds=nowDate.getSeconds()
				nowMonth=nowMonth<10?"0"+nowMonth:nowMonth
				nowDay=nowDay<10?"0"+nowDay:nowDay
				nowHours=nowHours<10?"0"+nowHours:nowHours
				nowMinutes=nowMinutes<10?"0"+nowMinutes:nowMinutes
				nowSeconds=nowSeconds<10?"0"+nowSeconds:nowSeconds
				let FullDate=nowYear+"-"+nowMonth+"-"+nowDay+"T"+nowHours+":"+nowMinutes+":"+nowSeconds+".820Z+8:00"
				console.log(FullDate,"FullDate")
				var this_ = this;
				console.log("submit!");
				
				//	console.log(this.form);
				this.$refs[formName].validate((valid)=>{
					if(valid){
						this.disable=true;
						if(this.menu.name == "新增菜单" || this.menu.name == "新增方案") {
					if(this.formData instanceof FormData) {
						console.log("FormData")
						console.log("way1");
						console.log(this.form);
						$.ajax({
							url: "http://172.17.99.10:10014//zuul/api/jp-TIFS-FileCenter-ms/file",
							type: 'POST',
							data: this_.formData,
							// 告诉jQuery不要去处理发送的数据
							processData: false,
							// 告诉jQuery不要去设置Content-Type请求头
							contentType: false,
							dataType: "json",
							success: function(res) {
								this_.objList.storeId=res.fileID;
								console.log(res,"ajax图片");
								addPic(this_.objList).then(
									function(res) {
										console.log("图片");
										console.log(res,"addPic图片");
										this_.form.image = {};
										this_.form.image.storeId = res.data.storeId;
										this_.form.image.createUserId=sessionStorage.getItem("userId")
										//	this.formData.delete("file");
										this_.resultData.displayname=this_.form.displayname
										this_.resultData.image=this_.form.image
										this_.resultData.image.updateTime=FullDate
										this_.resultData.name=this_.form.name
										this_.resultData.parentPrivilegeFunction=this_.form.parentPrivilegeFunction
										this_.resultData.remark=this_.form.remark
										this_.resultData.sort=this_.form.sort
										this_.resultData.target=this_.form.target
										this_.resultData.uri=this_.form.uri
										if(this_.form.target==="html"){
											this_.resultData.uri={}
											this_.resultData.uri.createTime=FullDate
											this_.resultData.uri.createUserId=sessionStorage.getItem("userId")
											this_.resultData.uri.url=this_.uri
										}
										console.log(this_.resultData,"****this_.resultData****")
										addMenu(this_.resultData).then(res => {
											console.log('新增菜单成功！');
											console.log(res);
											this_.$message('新增菜单成功！');
											this_.$router.push("/menu/list");
										});
									});
							}
						})
					}else if(this.resultData.image instanceof Object){
						console.log("test")
						if(this.resultData.image.storeId.length===0){
							this.resultData.image=null
						}
		                this.resultData.displayname=this.form.displayname
						this.resultData.name=this.form.name
						this.resultData.parentPrivilegeFunction=this.form.parentPrivilegeFunction
						this.resultData.remark=this.form.remark
						this.resultData.sort=this.form.sort
						this.resultData.target=this.form.target
						this.resultData.uri=this.form.uri
						if(this.form.target==="html"){
							this.resultData.uri={}
							this.resultData.uri.createTime=FullDate
							this.resultData.uri.createUserId=sessionStorage.getItem("userId")
							this.resultData.uri.url=this.uri
						}
						console.log(this.resultData,"by picPool");
						addMenu(this_.resultData).then(res => {
							console.log('新增菜单成功！');
							console.log(res);
							this_.$message('新增菜单成功！');
							this_.$router.push("/menu/list");
						});
					} else {
						console.log("way2");
						//alert(this.formData);
		                this.resultData.displayname=this.form.displayname
						this.resultData.name=this.form.name
						this.resultData.parentPrivilegeFunction=this.form.parentPrivilegeFunction
						this.resultData.remark=this.form.remark
						this.resultData.sort=this.form.sort
						this.resultData.target=this.form.target
						this.resultData.uri=this.form.uri
						if(this.form.target==="html"){
							this.resultData.uri={}
							this.resultData.uri.createTime=FullDate
							this.resultData.uri.createUserId=sessionStorage.getItem("userId")
							this.resultData.uri.url=this.uri
						}
						console.log(this.resultData,"is not formdata");
						addMenu(this.resultData).then(res => {
							console.log('新增菜单成功！');
							console.log(res,"addMenu res");
							
							this.$message('新增菜单成功！');
							this.$router.push("/menu/list");
						})
					}
				} else if(this.menu.name == "编辑菜单") {

					if(this.formData instanceof FormData) {
						console.log("way3");
						console.log(this.form);
						$.ajax({
							url: "http://172.17.99.10:10014//zuul/api/jp-TIFS-FileCenter-ms/file",
							type: 'POST',
							data: this_.formData,
							// 告诉jQuery不要去处理发送的数据
							processData: false,
							// 告诉jQuery不要去设置Content-Type请求头
							contentType: false,
							dataType: "json",
							success: function(res) {
								this_.objList.storeId=res.fileID;
								console.log(this_.objList);
								addPic(this_.objList).then(
									function(res) {
										this_.form.image = {};
										
										this_.form.image.storeId = res.data.storeId;
										//	this.formData.delete("file");
										let a = {};
										a.id = this_.menuid;
										a.privilegeFunction = this_.form;
										console.log(a);
										updateMenu(a).then(res => {
											console.log('编辑菜单成功！');
											console.log(res);
											
											this_.$message('编辑菜单成功！');
											this_.$router.push("/menu/list");
										})
									});
							}
						})
					} else {
						console.log("way4");
						console.log(this.form);
						let a = {};
						a.id = this.menuid;
						a.privilegeFunction = this.form;
						console.log(a);
						updateMenu(a).then(res => {
							console.log('编辑菜单成功！');
							console.log(res);
							
							this.$message('编辑菜单成功！');
							this.$router.push("/menu/list");
						})
					}
				}
					}else {
						console.log('error submit!!');
						return false;
					}
				})	
			},
			getallmenu() {
				getAllmenu().then(result => {
					this.parentMenu = result.data;
				})
			}
		},
		updated() {
			console.log("updated");
		}
	};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.addMenu {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 8px;
		.el-breadcrumb {
			font-size: 1.2em;
			padding: 8px;
			position: relative;
			padding-left: 40px;
		}
		.el-breadcrumb__item::after {
			position: absolute;
			left: 12px;
			top: -2px;
			display: inline-block;
			margin: 12px 10px 0 12px;
			vertical-align: bottom;
			width: 8px;
			height: 18px;
			background-color: #2ce2e0;
			content: ''
		}
		header {
			margin: 8px auto;
			.main-title {
				text-align: center;
				text-align: center;
				padding: 0;
				margin: 0;
				padding-top: 20px;
				font-size: 20px;
				font-weight: 600;
				font-family: SimHei;
			}
			.main-hr {
				height: 2px;
				margin: 0;
				padding: 0;
				margin-top: 5px;
				width: 120px;
				background-color: #d3d3d3;
				border: 0;
				margin-left: calc(50% - 60px);
			}
			.main-subtitle {
				text-align: center;
				color: #d3d3d3;
				margin: 0;
				padding: 0;
				font-size: 8px;
				margin-top: 5px;
				letter-spacing: 1px;
			}
		}
		.main {
			background: white;
			.contain {
				width: 60%;
				margin: 8px auto;
			}
			.bluecolor {
				background: #2DE1E1;
				border-color: #2DE1E1;
			}
			.menuform {
				.picture {
					position: relative;
					width: 120px;
					height: 120px;
					line-height: 120px;
					margin: 26px 0 0 0;
					display: flex;
					justify-content: center;
					align-item:center;
					overflow: hidden;
					border-radius: 4px;
					cursor: pointer;
					background-color: #29333d;
					.item-pic {
						position: absolute;
						max-width: 120px;
						max-height: 120px;
						margin-left: 120px;
						top:50%;
						transform:translate(0,-50%);
						border-right: 0 solid transparent;
						filter: drop-shadow(-120px 0 #93c4ff);
					}
					.shade {
						width: 120px;
						height: 34px;
						margin-top: 43px;
						color: #fff;
						line-height: 34px;
						font-size: 14px;
						z-index: 1;
						background-color: rgba(51, 80, 115, .8);
					}
				}
				.delamen {
					float: right;
					color: red;
				}
				.addzimenu {
					margin: 10px 0;
				}
				.el-input {
					width: 50%;
				}
				.upload-demo {
					display: inline-block;
				}
				.reform {
					margin-left: 30px;
				}
				.box-card {
					margin: 8px;
					background: #f3f4f9;
				}
				.el-card__header {
					background: #3a8ee6;
					color: white;
				}
			}
		}
	}
</style>